import { OrbitControls } from "@react-three/drei"
import { Canvas } from "@react-three/fiber"
import React, { useState } from 'react'
import '../index.css'
import './about.css'
// import DanmakuComponent from '../components/Danmu';
import { DownOutlined } from '@ant-design/icons'
import type { MenuProps } from 'antd'
import { Dropdown, Space } from 'antd'
import { useNavigate } from "react-router-dom"
import { useTheme } from "../components/Nodel"
// import Yyzst from '../components/Yyzst'
import ModeLViewer from '../components/Cbrow'
const About: React.FC = () => {
   // 动作切换
   const [mybee, setMybee] = useState('/public/lisa.glb');
   const app1 = (e:any) => {
      setTimeout(()=>{
         setMybee('/public/dz1.glb')
      },1000)
    }
    const app2 = (e:any) => {
       setTimeout(()=>{
         setMybee('/public/dz2.glb')
       },1000)
    }
    const app3 = (e:any) => {
       setTimeout(()=>{
         setMybee('/public/lisa2.glb')
       },1000)
    }
    const items: MenuProps['items'] = [
      {
        key: '1',
        label: (
          <p onClick={app3}>
            换动作
          </p>
        ),
      },
      {
        key: '2',
        label: (
          <p onClick={app2}>
            换人物
          </p>
        )
      },
      {
        key: '3',
        label: (
          <p onClick={app1}>
            换装扮
          </p>
        )
      }
    ];
    // 跳转到首页
  const navigate = useNavigate()
  const fang = () => {
    navigate('/home')
  }
  //切换主题
  const {theme,toggleTheme} = useTheme()
  return (
   <div className={`${theme === 'dark' ? 'dark-mode' : ''}`}>
     <img style={{height: '10vh', width: '100%'}} 
     src="../../public/image/ceil.png" alt="" />
     <div style={{
       height: '78vh', width: '100%',
       backgroundColor: `var(backgroundColor)`
     }}>
       <div style={{ height: '78vh', width: '38%', float: "left" }}>
         <Dropdown menu={{ items }}>
           <a onClick={(e) => e.preventDefault()}>
             <Space style={{ color: "#ccc" }}>
               更多动作
               <DownOutlined />
             </Space>
           </a>
         </Dropdown>
         <h1 style={{ textAlign: 'center' }}></h1>
         <Canvas>
           <ambientLight intensity={1} />
           <directionalLight position={[5, 5, 5]} intensity={1} />
           {/* ModelViewer是一个React函数组件，接收一个modelUrl作为prop，用于加载3D模型。 */}
           {/* 指向一个有效的glTF模型文件 */}
           <ModeLViewer modelUrl={mybee} />
           <OrbitControls />
         </Canvas>
       </div>
       {/* 主题切换 */}
       <button className='but'
         style={{
           backgroundColor: `var(--button-bg-color)`,
           color: `var(--button-text-color)`
         }}
         onClick={toggleTheme}
       >
         切换主题
       </button>
     </div>
   <img style={{width:"100%"}} src="../../public/image/floor.png" alt="" />
   </div>
 )
};

export default About;